improve: charts — table move, error boundary, options split, dark mode, graph/map styling - #282

component/src/components/composed/chart-options/gauge.ts (1)

60-68: Consider a structured zones type for better UX.

Using a text field for JSON input is functional but error-prone. The description helpfully shows the expected format, but users could easily mistype the JSON.

If ChartOptionDef supports a structured array/object type, that would provide validation and a better editing experience. This is a minor UX improvement that could be deferred.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@component/src/components/composed/chart-options/gauge.ts` around lines 60 -
68, The "thresholdZones" option currently uses a freeform text field with JSON
which is error-prone; change its ChartOptionDef from type "text" to a structured
array/object type (e.g., an array of zone objects) so the editor can validate
and provide a better UX, update its default from "" to a typed default like []
or [{value:30,color:"#67e0e3"},...], replace the JSON description with a
schema/field-level descriptions for each zone property, and ensure any parsing
code that reads "thresholdZones" (refer to the "thresholdZones" key in gauge.ts
and any code that consumes ChartOptionDef) handles the new typed structure
instead of raw JSON text.

component/src/charts/map-chart.tsx (1)

43-46: Narrow prop docs to color-only to match behavior.

The current comment says marker color/size, but this implementation path only drives marker color.

✏️ Suggested doc-only patch

-  /** Rule-based styling rules for marker color/size */
+  /** Rule-based styling rules for marker color */
   stylingRules?: StylingRule[];

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@component/src/charts/map-chart.tsx` around lines 43 - 46, Update the prop
JSDoc in map-chart.tsx to accurately reflect that the stylingRules prop only
controls marker color (not size); change the comment on stylingRules to mention
color-only rule-based styling and optionally clarify paramValues is used for
rule evaluation. Specifically update the doc for the stylingRules property (and
adjust paramValues comment if present) so it references marker color only, using
the existing identifiers stylingRules and paramValues to locate the props.

component/src/charts/graph-chart.tsx (1)

130-133: Align styling docs with implemented behavior.

Current wording says rules affect “color/size”, but this path applies only color. Tightening these comments will avoid API confusion.

✏️ Suggested doc-only patch

-  /** Rule-based styling rules for node color/size */
+  /** Rule-based styling rules for node color */
   stylingRules?: StylingRule[];

- * Color priority: explicit node.color > last-label color from palette > undefined.
+ * Color priority: styling rule > explicit node.color > last-label color from palette > undefined.

Also applies to: 250-257

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@component/src/charts/graph-chart.tsx` around lines 130 - 133, The JSDoc for
stylingRules is incorrect: it claims rules affect “color/size” but the
implemented logic only applies color; update the comments for stylingRules (and
the duplicate docs around the second occurrence) to state these rules control
node color only (e.g., "Rule-based styling rules for node color") and keep
paramValues doc as-is; locate the docs next to the stylingRules and paramValues
declarations in GraphChart (symbols: stylingRules, paramValues) and adjust both
occurrences so the API docs reflect actual behavior.

component/src/components/composed/chart-options/index.ts (1)

61-65: Consider adding accessibility options to all ECharts chart registries.

gauge, sankey, sunburst, radar, and treemap currently miss accessibilityOptions, which creates inconsistent option parity with other ECharts charts.

♻️ Suggested registry alignment

-  gauge: [...gaugeOptions, ...behaviorOptions, ...appearanceOptions],
-  sankey: [...sankeyOptions, ...behaviorOptions, ...appearanceOptions],
-  sunburst: [...sunburstOptions, ...behaviorOptions, ...appearanceOptions],
-  radar: [...radarOptions, ...behaviorOptions, ...appearanceOptions],
-  treemap: [...treemapOptions, ...behaviorOptions, ...appearanceOptions],
+  gauge: [
+    ...gaugeOptions,
+    ...behaviorOptions,
+    ...appearanceOptions,
+    ...accessibilityOptions,
+  ],
+  sankey: [
+    ...sankeyOptions,
+    ...behaviorOptions,
+    ...appearanceOptions,
+    ...accessibilityOptions,
+  ],
+  sunburst: [
+    ...sunburstOptions,
+    ...behaviorOptions,
+    ...appearanceOptions,
+    ...accessibilityOptions,
+  ],
+  radar: [
+    ...radarOptions,
+    ...behaviorOptions,
+    ...appearanceOptions,
+    ...accessibilityOptions,
+  ],
+  treemap: [
+    ...treemapOptions,
+    ...behaviorOptions,
+    ...appearanceOptions,
+    ...accessibilityOptions,
+  ],

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@component/src/components/composed/chart-options/index.ts` around lines 61 -
65, The chart registries for gauge, sankey, sunburst, radar, and treemap are
missing accessibilityOptions causing inconsistent option parity; update each
registry entry (symbols: gauge, sankey, sunburst, radar, treemap) to include
accessibilityOptions alongside their existing arrays (e.g., change gauge:
[...gaugeOptions, ...behaviorOptions, ...appearanceOptions] to include
...accessibilityOptions) so all ECharts chart registries uniformly include
accessibilityOptions.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes